<template>
  <div class="box">
    <div class="clearfix top">
      <p class="title">热门景区排行</p>
      <p class="bg"></p>
    </div>

    <div class="charts" ref="echartsRef"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

import * as echarts from 'echarts'
const echartsRef = ref()
onMounted(() => {
  const myCharts = echarts.init(echartsRef.value)
  myCharts.setOption({
    title: {
      text: '景区排行',
      left: 'center',
      textStyle: {
        color: '#fff'
      },
      subtext: '各大景区排行',
      subtextStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      splitLine: {
        show: false
      },
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false
      },
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      }
    },
    grid: {
      left: 30,
      // top: 30,
      right: 30,
      bottom: 30
    },
    tooltip:{

    },
    series: [
      {
        type: 'bar',
        data: [4, 2, 4, 5, 6, 7, 5],
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          borderRadius: [6, 6, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        }
      },
      {
        type: 'line',
        data: [2, 5, 7, 9, 3, 1, 9],
        smooth: true
      }
    ]
  })
})
</script>

<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  background: #fff;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .top {
    padding-top: 10px;
    font-size: 20px;
    margin: 0 20px;
    color: #fff;

    .bg {
      margin-top: 10px;
      width: 68px;
      height: 7px;
      background: url(../../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .charts {
    width: 100%;
    flex: 1;
  }
}
</style>
